<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/include-cesium-local.js"></script>
    <script src="./Cesium/include-lib-local.js"></script>
    <script src="./config/ion.js"></script>
  </head>
  <body>
    <div id="GlobeView"></div>
    <script>
      const esri = new Cesium.ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      });
      const viewer = new Cesium.Viewer('GlobeView', {
        imageryProvider: esri,
        //terrainProvider: Cesium.createWorldTerrain(),
      });
      const position = Cesium.Cartesian3.fromDegrees(102.8603, 24.8735, 0);
      //以提供的原点为中心,根据航向-俯仰-横滚角计算的轴
      /* 第一个参数是位置信息,第二个参数是选中角度信息 */
      const orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        new Cesium.HeadingPitchRoll.fromDegrees(71.5, 0, 0)
      );
      var entity = viewer.entities.add({
        position: position,
        orientation: orientation,
        model: {
          uri: './data/tain.gltf',
          show: true,
          scale: 1.3, //放大倍数
        },
      });

      //需要对物体进行多角度观察 使用viewBoundingSphere方法
      //第一个参数传递观察的位置，及距离 第二参数传观察的角度
      viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(
          102.858205,
          24.873613,
          1000.0
        ),
      });
    </script>
  </body>
</html>
